﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Smith Paginator Demo</title>
    <link href="smithpaginator.css" rel="stylesheet" type="text/css" />
    <script src="smithpaginator.js" type="text/javascript"></script>
    <script type="text/javascript">
        var p1, p2;
        window.onload = function () {
            var pid = SmithPaginator.getPageIndex('pid');
            p1 = new SmithPaginator('paginator1',
            {
                pageIndex: pid,
                pageCount: 20,
                maxRange: 10,
                requestUrl: 'demo.html?pid=@pid'
            });
            p2 = new SmithPaginator('paginator2',
            {
                pageCount: 20,
                maxRange: 10,
                callback: function (sender, pid) {
                    sender.setPageIndex(pid);
                    return false;
                }
            });
        }
    </script>
    <style type="text/css">
    body{ color:#393939; font-family: 'Segoe UI', Verdana, Arial, Tahoma; font-size: 13px; margin:0; padding:10px 20px; }
    h1,h2,h3,h4,h5,h6{ line-height:normal; margin:0; } h1{ font-size:18px; padding:8px 0; } h3{ font-size: 13px; padding:5px 0; } p{ margin:0; padding:3px 0; }
    input{ margin:5px; padding:2px 3px; } span{ margin-right:10px; }
    .section{ border-bottom:1px dashed #efefef; margin:5px 0 0 0; padding:10px 0; }
    .code{ background:#efefef; color:#090909; font-family:Consolas, 'Courier New'; font-size:12px; display:block; line-height:20px; margin:5px 0; padding:8px; }
    .footer{ margin:20px 0 160px 0;}
    </style>
</head>
<body>
    <h1>Smith Paginator</h1>
    <p>
        <span>Author: John Smith</span>
        <span>Version: 1</span>
        <span>License: GPL</span>
    </p>
    <div>
        <p>Smith Paginator is to append links in div for pagination.</p>
        <p>To use this control, first include the css file &quot;smithpaginator.css&quot; and javascript file &quot;smithpaginator.js&quot; in the head of your html page.</p>
        <div class="code">        
            &lt;link href=&quot;smithpaginator.css&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
            &lt;script src=&quot;smithpaginator.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        </div>
    </div>
    <div class="section">
        <h3>Example 1</h3>
        <p>Make pagination link.</p>
        <div class="code">
            &lt;script type=&quot;text/javascript&quot;&gt;<br />
            &nbsp;&nbsp;&nbsp; var p1;<br />
            &nbsp;&nbsp;&nbsp; window.onload = function () {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var pid = SmithPaginator.getPageIndex(&#39;pid&#39;);<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p1 = new SmithPaginator(&#39;paginator1&#39;, {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pageIndex: pid,ageIndex: pid,<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pageCount: 20,<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxRange: 10,<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; requestUrl: &#39;demo.html?pid=@pid&#39;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />
            &nbsp;&nbsp;&nbsp; }<br />
            &lt;/script&gt;</div>
        <div id="paginator1"></div>
    </div>
    <div class="section">
        <h3>Example 2</h3>
        <p>Update page index without refreshing the page (for ajax porpose).</p>
        <div class="code">
            &lt;script type=&quot;text/javascript&quot;&gt;<br />
            &nbsp;&nbsp;&nbsp; var p2;<br />
            &nbsp;&nbsp;&nbsp; window.onload = function () {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p2 = new SmithPaginator(&#39;paginator2&#39;, {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pageCount: 20,<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxRange: 10,<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback: function (sender, pid) {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sender.setPageIndex(pid);<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />
            &nbsp;&nbsp;&nbsp; }<br />
            &lt;/script&gt;</div>
        <div id="paginator2"></div>
    </div>
    <div class="footer">        
        <p><strong>Any help and suggestion for improving this control is welcome!</strong></p>
        <p>you can contact me with this email: <a href="mailto:john.smith.17th@gmail.com">john.smith.17th@gmail.com</a></p>
        <p>Last edit at 2011/07/15 by John Smith.</p>
    </div>
</body>
</html>
